<template>
	<view class="">
		<w-navbar title="选择分类" titleColor="black" backgroundColor="white"></w-navbar>
		<w-container>
			<template>
				<search v-model="search_title" @input="searchInput" @search="get_category_list" @clear="searchInput"></search>
				<view class="content">
					<view class="class_box">
						<view :class="class_choose.id == item.id?'class_item_choose':''" @click="classChoose(item)" class="class_item" v-for="(item,index) in class_list" :key="index">
							{{item.name}}
						</view>
					</view>
					<view class="" style="height: 140rpx;">
						
					</view>
				</view>
				<view class="btn_box">
					<view @click="showAddClass = true" class="fr-ac-jc btn_child">
						<view class="mr-20" style="font-size: 48rpx;">
							+
						</view>
						<view class="fs-16">
							添加分类
						</view>
					</view>
				</view>
				<template>
					<u-popup :show="showAddClass" @close="showAddClass = false" :closeable="true">
						<view class="popup_box">
							<view class="title">
								添加分类
							</view>
							<view class="title_box fr-ac-jsb">
								<view class="text">
									分类名称
								</view>
							</view>
							<view class="size_name">
								<input v-model="addClassName" type="text" placeholder="填写分类名称">
							</view>
							<view class="shopping fw">
								<view class="confirm" @click="addClass">
									确认
								</view>
							</view>
						</view>
					</u-popup>
				</template>
			</template>
		</w-container>
	</view>
</template>

<script>
	import {getJumpData} from '@/utils/common.js'
	export default {
		data() {
			return {
				search_title:'',
				
				class_list:{},
				class_choose:{},
				
				showAddClass:false,
				addClassName:'',
			}
		},
		watch: {
		
		},
		onLoad() {
			this.get_category_list()
			// getJumpData.call(this,'on','goClassificationChooseData',(res)=>{
			// 	this.class_list = res
			// })
		},
		onShow() {
		},
		methods: {
			searchInput(val){
				this.search_title = val
				this.get_category_list()
			},
			classChoose(item){
				this.class_choose = item
				this.confirmChoose()
			},
			confirmChoose(){
				uni.navigateBack()
			},
			addClass(){
				this.add_category()
			},
			async add_category() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.goods/add_category',
					data: {
						name:this.addClassName
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.addClassName = ''
					uni.showModal({
						title:'添加成功',
						content:'是否继续添加',
						success: (res) => {
							if(res.confirm){
							}else{
								this.showAddClass = false
							}
						},
						complete: () => {
							this.get_category_list()
						}
					})
				}
			},
			async get_category_list() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.goods/get_category_list',
					data: {
						title:this.search_title
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.class_list = res.data.category_list
				}
			},
		},
		onUnload() {
			getJumpData.call(this,'emit','getClassification',this.class_choose)
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100%;
		background-color: rgb(255, 255, 255);
	}
	
	.class_box{
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 30rpx;
		
		.class_item{
			width: 48%;
			margin: 10rpx 1%;
			height: 150rpx;
			line-height: 150rpx;
			text-align: center;
			box-sizing: border-box;
			border: 2rpx solid #eee;
			font-weight: bold;
			font-size: 34rpx;
		}
		
		.class_item_choose{
			border-color: $theme-color;
			color: $theme-color;
		}
	}
	
	.btn_box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 140rpx;
		box-sizing: border-box;
		background-color: white;
		padding: 0 30rpx 50rpx 30rpx;
		
		.btn_child{
			background-color: $theme-color;
			height: 100%;
			width: 100%;
			view{
				text-align: center;
				color: white;
			}
		}
	}
	
	.popup_box{
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		background-color: white;
		
		.title{
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
		
		.size_name{
			border: 3rpx solid black;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
		}
		
		
		.gooods_size{
			
			.gooods_size_item{
				width: 21%;
				margin: 10rpx 2%;
				padding: 8rpx 0;
				text-align: center;
				border: 2rpx solid #eee;
			}
			
			&.check{
				background-color: $theme-color;
				color: white;
			}
		}
		
		.title_box{
			margin: 30rpx 0;
			
			.text{
				font-weight: bold;
			}
		}
		.shopping{
			margin-top: 40rpx;
			width: 100%;
			height: 70rpx;
			
			.confirm{
				line-height: 70rpx;
				text-align: center;
				width: 100%;
				background-color: $theme-color;
				color: white;
			}
		}
	}
</style>